<template>
    <div class="staff">
        <div style="display: flex;width: 100%;" v-show="isShow">
            <Ruleleft />
            <Ruletable />
        </div>
        <router-view v-slot="{ Component }" v-show="!isShow">
            <transition name="fade" mode="out-in" appear>
                <component :is="Component" />
            </transition>
        </router-view>
    </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import Ruleleft from '@/components/rule/ruleleft.vue';
import Ruletable from '@/components/rule/ruletable.vue';
import { useRoute } from 'vue-router'
let route = useRoute()
let isShow = ref(true)
watchEffect(() => {
    if (route.path == '/home/employee') {
        setTimeout(() => {
            isShow.value = true
        }, 800)
    } else {
        isShow.value = false
    }
})
</script>

<style>
@import '../assets/rule.css';
</style>